<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{ msg }}</h1>
    <Father></Father>
</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    Vue.component('Father', {
        data() {
            return {
                money: 1000,
                msg: '',
            }
        },
        methods: {
            cb(data) {
                console.log(data, '子组件传递的数据');
                this.msg = data.msg;
            },
        },
        template: `
            <div>
            <h2>我是父组件-{{ msg }}</h2>
            <Son :n="money" @myevent="cb"></Son>
</div>
        `
    });

    Vue.component('Son', {
        props: {
            n: {
                type: Number,
                required: true,
            }
        },
        data() {
            return {
                qian: 10,
                msg: 'dad， 给的钱不够啊！'
            }
        },
        methods: {
            callFather() {
                console.log('callFather');

                // 在子组件里面触发父组件绑定的自定义事件. 然后父组件里面的自定义事件的回调函数执行，参数列表就是我们子组件传递过去的数据
                this.$emit('myevent', {msg: this.msg, qian: this.qian})
            }
        },
        template: `
            <div>
            <h3>我是子组件</h3>
            <p>{{ n }}</p>
            <button @click="callFather">打电话</button>
</div>
        `
    });


    /*
    * 子父通信是基于回调函数实现（也称之 打电话实现）
    * 操作步骤如下：
    * 1. 先要在父组件里面进行自定义事件定义和回调函数定义
    * 2. 把自定义事件绑定在子组件间上面
    * 3. 子组件触发父组件绑定的自定义事件
    *
    * */
    new Vue({
        el: '#app',
        data: {
            msg: '父子通信'
        }
    })

</script>

</html>
